<template>
  <!-- 独立视频监控弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="实时监控"
    width="600px"
    :close-on-click-modal="false"
    custom-class="video-dialog"
  >
    <div class="video-content">
      <!-- 视频展示区 -->
      <div class="video-wrapper">
        <img
          :src="videoData.url"
          alt="监控画面"
          class="video-preview"
          v-if="videoData.type === 'image'"
        />
      </div>

      <!-- 结构化信息展示 -->
      <el-descriptions :column="1" border>
        <el-descriptions-item label="位置" min-width="80px">
          {{ videoData.location || '未知位置' }}
        </el-descriptions-item>
        <el-descriptions-item label="时间">
          {{ videoData.timestamp || '--:--:--' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusColor" size="small">
            {{ statusText }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'

// 弹窗显示控制
const dialogVisible = ref(false)

// 视频数据示例结构
const videoData = ref({
  url: 'front-end/public/images/vecmap.png',
  location: '珞横路与储能大厦交叉口',
  timestamp: '2024-02-20 14:30:00',
  status: 'normal', // normal/warning/emergency
  type: 'image'
})

// 状态计算属性
const statusText = computed(() => {
  const statusMap = {
    normal: '正常',
    warning: '预警',
    emergency: '紧急'
  }
  return statusMap[videoData.value.status] || '未知状态'
})

const statusColor = computed(() => {
  return videoData.value.status === 'normal' ? 'success' : 'danger'
})

// 对外暴露打开方法
defineExpose({ open: () => dialogVisible.value = true })
</script>

<style lang="scss" scoped>
// 弹窗标题样式
:deep(.video-dialog) {
  .el-dialog__header {
    background: #409EFF;
    margin: 0;
    padding: 12px 20px;

    .el-dialog__title {
      color: white;
      font-size: 16px;
      letter-spacing: 1px;
    }
  }

  // 内容区域布局
  .video-content {
    .video-wrapper {
      height: 300px;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 16px;

      .video-preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    // 信息标签样式
    .el-descriptions__label {
      width: 80px;
      text-align: justify;
      text-justify: distribute-all-lines;
    }
  }
}
</style>
